<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{admin/adminJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">

<body layout:fragment="content">
    <!--搜索栏-->
    <div id="toolbar">
        <div id="search" style="padding:15px">
            <span>角色名称:</span>
            <el-input v-model="name"  style="width: 150px;"></el-input>
            <span>角色英文名称:</span>
            <el-input v-model="roleCode"  style="width: 150px;"></el-input>
            <a id="btn" href="#" v-on:click="query" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
        </div>
        <div id="operator" style="padding:0 0 15px 15px">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" v-on:click="add('')">新增</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" v-on:click="edit()">修改</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" v-on:click="deleted()">删除</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-man'" v-on:click="roleUserList()">角色成员</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-lock'" v-on:click="rolePermission()">权限菜单配置</a>
        </div>
    </div>
    <!--列表-->
    <table id="table" style="width:100%;" >

    </table>

    <script>

        var filter={ name:'', roleCode:''};

        function reload(){
            $('#table').datagrid('reload',filter);
        }

        function closeDialog(isRefresh) {
            if(isRefresh){
                reload();
            }
            $('#editDialog').dialog("close");
        }

        var vm=  new Vue({
            el: '#toolbar',
            data:filter,
            methods: {
                query:function () {
                    reload();
                },
                add:function (id) {
                    EasyuiUtils.openWindows("editDialog",'新增',560,380,'/admin/user/role/edit?id='+id);
                },
                edit:function () {
                    var row=EasyuiUtils.getSelected("#table");
                    if(row){
                        this.add(row.id);
                    }
                },
                deleted:function () {
                    EasyuiUtils.confirmDelete("#table",'/admin/user/role/delete');
                },roleUserList:function () {
                    var row=EasyuiUtils.getSelected("#table");
                    if(row){
                        EasyuiUtils.openWindows("editDialog",'角色-用户列表',900,680,'/admin/user/user/roleUserList?roleId='+row.id);
                    }
                },rolePermission:function () {
                    var row=EasyuiUtils.getSelected("#table");
                    if(row){
                        EasyuiUtils.openWindows("editDialog",'权限菜单配置',400,580,'/admin/system/menu/rolePermission?roleId='+row.id);
                    }
                }

            }
        });

        $('#table').datagrid({
            url:'/admin/user/role/listData',
            queryParams:filter,
            columns:[
                [
                    {field:'id',title:'id',align:'center',width:'10%',hidden:false,checkbox:true},
                    {field:'name',title:'角色名称',align:'center',width:'20%',hidden:false},
                    {field:'roleCode',title:'角色英文',align:'center',width:'20%',hidden:false},
                    {field:'remark',title:'描述',align:'center',width:'40%',hidden:false},
                    {field:'createTime',title:'创建时间',align:'center',width:'15%',hidden:false}
                ]
            ],
            striped:true,
            pagination:true,
            rownumbers:true,
            singleSelect:true,
            toolbar:'#toolbar'
        });

    </script>
</body>

</html>